// 动画检测脚本 - 仅在用户滚动浏览时加载卡片
(function() {
    // 初始化函数
    function init() {
        // 为页面顶部可见区域的卡片设置较低的初始可见性阈值，优先显示顶部内容
        const topElements = document.querySelectorAll('.realtime-bar .realtime-item, .dashboard-header .stat-card');
        
        // 为顶部元素创建一个单独的observer，阈值设置更高，使其更快触发
        let topObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 为顶部元素添加动画类
                    entry.target.classList.add('animate-in');
                    topObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1, // 当10%的元素可见时触发
            rootMargin: '0px 0px 200px 0px' // 提前200px开始观察
        });

        // 为顶部元素添加观察器
        topElements.forEach(element => {
            topObserver.observe(element);
        });

        // 为所有卡片元素创建主要的滚动观察器
        // 这将使卡片仅在用户滚动到视图中时才加载显示
        let cardObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 为卡片添加动画类，触发淡入效果
                    entry.target.classList.add('animate-in');
                    
                    // 一旦触发动画，取消观察以避免重复触发
                    cardObserver.unobserve(entry.target);
                    
                    // 添加一个小延迟，确保动画效果自然流畅
                    setTimeout(() => {
                        entry.target.style.willChange = 'auto'; // 优化性能
                    }, 1000);
                }
            });
        }, {
            threshold: 0.05, // 当只有5%的元素可见时就触发，提前开始动画
            rootMargin: '0px 0px 100px 0px' // 提前100px开始观察，增强实时加载感
        });

        // 为所有卡片元素添加观察器，但排除已经由topObserver处理的顶部元素
        document.querySelectorAll('.card').forEach(card => {
            // 确保只观察不在顶部区域的卡片
            if (!card.closest('.realtime-bar') && !card.closest('.dashboard-header')) {
                // 设置初始优化样式
                card.style.willChange = 'opacity, transform';
                cardObserver.observe(card);
            }
        });
    }

    // 当DOM加载完成时初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();